<template>
  <div class="homepage">
    <el-form
      ref="ruleForm"
      :model="ruleForm"
      :rules="rules"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item label="考核发起人" prop="">
        <el-row :gutter="5">
          <el-col :span="4">
            <el-form-item label="" prop="assessmentDepartment" label-width="50px" class="item">
              <el-input
                v-model="ruleForm.assessmentDepartment"
                placeholder="选部门"
                style="width: 200px"
                @click.native="popUpClick(0)"
              />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item
              label=""
              prop="assessmentRole"
              label-width="50px"
              class="item"
            >
              <el-input
                v-model="ruleForm.assessmentRole"
                style="width: 200px"
                placeholder="选角色"
                @click.native="popUpClick(1)"
              />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="" prop="assessmentPersonnel" label-width="50px" class="item">
              <el-input
                v-model="ruleForm.assessmentPersonnel"
                style="width: 200px"
                placeholder="选人员"
                @click.native="popUpClick(2)"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item label="被考核人员" prop="region">
        <el-row :gutter="5">
          <el-col :span="4">
            <el-form-item label="" prop="assessedDepartment" label-width="50px" class="item">
              <el-input
                v-model="ruleForm.assessedDepartment"
                placeholder="选部门"
                style="width: 200px"
                @click.native="popUpClick(3)"
              />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="" prop="assessedRole" label-width="50px" class="item">
              <el-input
                v-model="ruleForm.assessedRole"
                placeholder="选角色"
                style="width: 200px"
                @click.native="popUpClick(4)"
              />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="" prop="assessedPersonnel" label-width="50px" class="item">
              <el-input
                v-model="ruleForm.assessedPersonnel"
                placeholder="选人员"
                style="width: 200px"
                @click.native="popUpClick(5)"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form-item>
      <!-- style="display:none" -->
      <el-form-item>
        <el-button
          type="primary"
          @click="submitForm('ruleForm')"
        >立即创建</el-button>

      </el-form-item>
    </el-form>
    <!-- 考核角色 -->
    <popUp
      :poshow="popUpObj[popUpIndex].show"
      :type="popUpObj[popUpIndex].type"
      :title="popUpObj[popUpIndex].potitle"
      :echo="popUpObj[popUpIndex].commitArray"
      :index="popUpIndex"
      @handleClose="handleClose"
      @handleDetermine="handleDetermine"
    />

  </div>
</template>

<script>
import popUp from '../components/pop.vue'
export default {
  components: {
    popUp
  },
  data() {
    return {
      popUpObj: [
        {
          show: false,
          type: '1',
          potitle: '选部门',
          commitArray: []
        },
        {
          show: false,
          type: '2',
          potitle: '选角色',
          commitArray: []
        },
        {
          show: false,
          type: '3',
          potitle: '选人员',
          commitArray: []
        },
        {
          show: false,
          type: '4',
          potitle: '选部门',
          commitArray: []
        },
        {
          show: false,
          type: '5',
          potitle: '选角色',
          commitArray: []
        },
        {
          show: false,
          type: '6',
          potitle: '选人员',
          commitArray: []
        }

      ],
      popUpIndex: 0, // 点击的
      ruleForm: {
        assessmentDepartment: '', // 考核 部门
        assessmentRole: '', // 考核 角色
        assessmentPersonnel: '', // 考核 人员
        assessedDepartment: '', // 被考核部门
        assessedRole: '', // 被考核角色
        assessedPersonnel: '' // 被考核人员
      },
      rules: {
        assessmentDepartment: [
          { required: true, message: '请选择考核发起部门', trigger: 'change' }
        ],
        assessmentRole: [
          { required: true, message: '请选择考核发起角色', trigger: 'change' }
        ],
        assessmentPersonnel: [
          { required: true, message: '请选择考核发起人员', trigger: 'change' }
        ],
        assessedDepartment: [
          { required: true, message: '请选择被考核人员', trigger: 'change' }
        ],
        assessedRole: [
          { required: true, message: '请选择被考核角色', trigger: 'change' }
        ],
        assessedPersonnel: [
          { required: true, message: '请选择被考核人员', trigger: 'change' }
        ]

      }
    }
  },
  mounted() {

  },
  created() {
    if (JSON.parse(localStorage.getItem('setTargetassignmentOBJ'))) {
      this.popUpObj = JSON.parse(localStorage.getItem('setTargetassignmentOBJ')).popUpObj
      this.ruleForm = JSON.parse(localStorage.getItem('setTargetassignmentOBJ')).ruleForm
    }
  },
  destroyed() {
    const setTargetassignmentOBJ = {
      ruleForm: this.ruleForm,
      popUpObj: this.popUpObj

    }
    localStorage.setItem('setTargetassignmentOBJ', JSON.stringify(setTargetassignmentOBJ))
  },
  methods: {
    submitForm() {
      this.$refs['ruleForm'].validate((valid) => {
        if (valid) {
          alert('submit!')
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    // 点击弹窗
    popUpClick(index) {
      this.popUpIndex = index
      this.popUpObj[this.popUpIndex].show = true
    },
    // 弹窗确定
    handleDetermine(str, newarr, index) {
      if (index === 0) {
        this.ruleForm.assessmentDepartment = str
      } else if (index === 1) {
        this.ruleForm.assessmentRole = str
      } else if (index === 2) {
        this.ruleForm.assessmentPersonnel = str
      } else if (index === 3) {
        this.ruleForm.assessedDepartment = str
      } else if (index === 4) {
        this.ruleForm.assessedRole = str
      } else if (index === 5) {
        this.ruleForm.assessedPersonnel = str
      }
      this.popUpObj[index].show = false
      this.popUpObj[index].commitArray = newarr
    },
    // 关闭弹窗
    handleClose(index) {
      this.popUpObj[index].show = false
    }
  }
}
</script>

<style scoped>
</style>
